.navbar-admin {
    width: 100%;
    height: 64px;
    position: fixed;
    top: 0;
    z-index: 100;
    // background: #607D8B;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    .navbar-container {
        padding: 0 100px 0 240px;
        .brand {
            float: left;
        }
        .welcome-admin {
            float: right;
            .head-img {
                margin-left: 40px;
                width: 40px;
            }
            .btn-default {
                color: white;
                background-color: transparent;
                border: none;
                box-shadow: none;
                height: 64px;
                &:active {
                    background-color: transparent;
                }
            }
        }
        .fa-bell, .fa-sign-out {
            font-size: 22px;
            line-height: 64px;
            color: #E8EAF6;
        }
        .function-area {
            float: left;
            width: 200px;
            margin-left: 20px;
            padding: 13px 0;
        }
    }
}

.body {
    height: 100%;
    .layout-menu-wrapper {
        height: 100%;
        // background-image: url(/assets/images/bg-moody-light.png);
        background-size: 100% 100%;
        position: fixed;
        top: 0;
        width: 240px;
        z-index: 200;
        box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
        .item-active {
            color: #9CCC65 !important;
        }
        .sidebar-logo {
            height: 64px;
            // background-color: rgba(36, 50, 59, 0.5);
            .brand {
                color: #ffffff;
                padding: 15px;
            }
        }
        ul.menu-ul {
            margin-top: 10px;
            list-style: none;
            padding-left: 0;
            padding-bottom: 120px;
            >li {
                width: 240px;
                padding: 4px 10px 4px 10px;
                .active-a {
                    color: #ffffff;
                    background-color: #7CB342;
                    -moz-border-radius: 6px;
                    -webkit-border-radius: 6px;
                    border-radius: 6px;
                    -moz-border-radius-bottomleft: 0 !important;
                    -webkit-border-bottom-left-radius: 0 !important;
                    border-bottom-left-radius: 0 !important;
                    -moz-border-radius-bottomright: 0 !important;
                    -webkit-border-bottom-right-radius: 0 !important;
                    border-bottom-right-radius: 0 !important;
                    -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(60, 72, 88, 0.3), 0 7px 10px -5px rgba(60, 72, 88, 0.1);
                    -moz-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(60, 72, 88, 0.3), 0 7px 10px -5px rgba(60, 72, 88, 0.1);
                    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(60, 72, 88, 0.3), 0 7px 10px -5px rgba(60, 72, 88, 0.1);
                    transition-property: background-color;
                    transition-duration: 0.5s;
                    transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
                    &:hover {
                        background-color: #7CB342 !important;
                    }
                }
                .inactive-a {
                    color: #ffffff;
                    background-color: transparent;
                    -moz-border-radius: 6px;
                    -webkit-border-radius: 6px;
                    border-radius: 6px;
                    transition-property: background-color;
                    transition-duration: 0.3s;
                    transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
                }
                >a {
                    text-decoration: none;
                    display: block;
                    border-radius: 6px;
                    padding: 10px 10px 10px 10px;
                    color: #ffffff;
                    cursor: pointer;
                    &:hover {
                        background-color: rgba(0, 0, 0, 0.4);
                    }
                    span {
                        float: right;
                        font-size: 17px;
                    }
                    .menu-down {
                        font-size: 14px;
                        padding: 2px 10px;
                    }
                }
                ul.child-ul {
                    padding-left: 0;
                    list-style: none;
                    margin-top: 0px;
                    background-color: rgba(255, 255, 255, 0.2);
                    border-bottom-left-radius: 6px;
                    border-bottom-right-radius: 6px;
                    transition-property: height;
                    transition-duration: 0.2s;
                    transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
                    overflow: hidden;
                    height: 96px;
                    // height: 144px;
                    padding-bottom: 0 !important;
                    li {
                        padding: 4px 0;
                        a {
                            border-radius: 0;
                            text-decoration: none;
                            display: block;
                            padding: 10px 10px 10px 20px;
                            color: #ffffff;
                            cursor: pointer;
                            &:hover {
                                background-color: rgba(0, 0, 0, 0.4);
                            }
                            span {
                                float: right;
                                font-size: 17px;
                            }
                        }
                    }
                }
                ul.child-setting-ul {
                    padding-left: 0;
                    list-style: none;
                    margin-top: 0px;
                    background-color: rgba(255, 255, 255, 0.2);
                    border-bottom-left-radius: 6px;
                    border-bottom-right-radius: 6px;
                    transition-property: height;
                    transition-duration: 0.2s;
                    transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
                    overflow: hidden;
                    // height: 96px;
                    height: 192px;
                    padding-bottom: 0 !important;
                    li {
                        padding: 4px 0;
                        a {
                            border-radius: 0;
                            text-decoration: none;
                            display: block;
                            padding: 10px 10px 10px 20px;
                            color: #ffffff;
                            cursor: pointer;
                            &:hover {
                                background-color: rgba(0, 0, 0, 0.4);
                            }
                            span {
                                float: right;
                                font-size: 17px;
                            }
                        }
                    }
                }
                ul.close-child-ul {
                    height: 0px;
                    padding-left: 0;
                    overflow: hidden;
                    transition-property: height;
                    transition-duration: 0.1s;
                    transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
                    background-color: rgba(255, 255, 255, 0.2);
                    border-bottom-left-radius: 6px;
                    border-bottom-right-radius: 6px;
                    list-style: none;
                    li {
                        padding: 4px 0;
                        a {
                            border-radius: 0;
                            text-decoration: none;
                            display: block;
                            padding: 10px 10px 10px 20px;
                            color: #ffffff;
                            cursor: pointer;
                            &:hover {
                                background-color: rgba(0, 0, 0, 0.4);
                            }
                            span {
                                float: right;
                                font-size: 17px;
                            }
                        }
                    }
                }
            }
        }
    }
}

:host /deep/ .custom .ui-scrollpanel-bar {
    background-color: #aaaaaa !important; 
    opacity: 0.3 !important;
}